<template>
  <div class="questionBankExplanation">
    <!-- 左右布局 -->
    <div class="layout">
      <!-- 左边：组卷选择信息 -->
      <div class="left-panel">
        <h2>智能练习</h2>
        <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">

          <!-- 组卷类型 -->
          <el-form-item label="组卷类型">
            <el-radio-group v-model="formData.type">
              <el-radio label="手动组卷" />
              <el-radio label="Ai组卷" />
            </el-radio-group>
          </el-form-item>

          <h4 class="form-label-h4">必填选项</h4>
          <!-- 组卷标题 -->
          <el-form-item label="学科" prop="Subject">
            <el-input v-model="formData.Subject" placeholder="请输入学科" @blur="validateField('title')" />
          </el-form-item>

          <el-form-item label="试卷标题" prop="title">
            <el-input v-model="formData.title" placeholder="请输入试卷标题" @blur="validateField('title')" />
          </el-form-item>

          <el-form-item label="试卷总分" prop="score">
            <el-input v-model="formData.score" placeholder="请输入试卷总分" @blur="validateField('score')" />
          </el-form-item>

          <el-form-item label="考试时长" prop="time">
            <el-input v-model="formData.time" placeholder="请输入考试时长(单位分钟)" @blur="validateField('time')" />
          </el-form-item>

          <div v-if="formData.type === 'Ai组卷'">
            <el-form-item label="组卷策略" prop="strategies">
              <el-select v-model="searchParams.strategies" placeholder="请选择组卷策略" @change="validateField('strategies')">
                <el-option v-for="strategie in strategies" :key="strategie" :label="strategie" :value="strategie" />
              </el-select>
            </el-form-item>

            <el-form-item label="组卷难度" prop="difficulty">
              <el-radio-group v-model="formData.difficulty" @change="validateField('difficulty')">
                <el-radio label="简单" />
                <el-radio label="一般" />
                <el-radio label="困难" />
              </el-radio-group>
            </el-form-item>
          </div>
          <!-- 分割线 -->
          <el-divider class="form-divider" />

          <!-- 手动组卷：搜索和选择题目 -->
          <template v-if="formData.type === '手动组卷'">
            <h4 class="form-label-h4">可填选项</h4>
            <el-form-item label="题目">
              <el-input v-model="searchParams.title" placeholder="请输入题目" />
            </el-form-item>

            <el-form-item label="所属学科">
              <el-select v-model="courseId" @change="handleCourseChange" placeholder="请选择所属学科">
                <el-option v-for="course in courses" :key="course.courseId" :label="course.courseName"
                  :value="course.courseId" />
              </el-select>
            </el-form-item>

            <el-form-item label="学科知识点">
              <el-select v-model="selectedKnowledgeId" placeholder="请选择学科知识点" :disabled="!courseId">
                <el-option v-for="point in filteredKnowledgePoints" :key="point.recordId"
                  :label="point.knowledgeContent" :value="point.recordId" />
              </el-select>
            </el-form-item>

            <el-form-item label="题型范围">
              <el-select v-model="searchParams.questionType" placeholder="请选择题型范围">
                <el-option label="选择题" value="选择题" />
                <el-option label="填空题" value="填空题" />
                <el-option label="判断题" value="判断题" />
                <el-option label="简答题" value="简答题" />
              </el-select>
            </el-form-item>

            <el-form-item label="题难度">
              <el-radio-group v-model="searchParams.difficulty">
                <el-radio :value="1">简单</el-radio>
                <el-radio :value="2">一般</el-radio>
                <el-radio :value="3">困难</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <el-button type="primary" @click="searchQuestions(1, pageSize)" class="button">搜索</el-button>
            </el-form-item>
          </template>

          <!-- AI 组卷：组卷难度、课程类型、题型范围 -->
          <template v-else>
            <h4 class="form-label-h4">可填选项</h4>
            <p class="Ai-handlecourse">
              已选择 {{ selectedCount }} 个知识点
            </p>
            <div class="Ai-course">
              <div class="Ai-course-button">
                <button class="course-button" type="button" v-for="course in courses" :key="course.courseId"
                  :class="{ 'course-button--selected': formData.selectedCourses.includes(course.courseName) }"
                  @click="toggleCourse(course.courseName)">
                  {{ course.courseName }}
                </button>
              </div>
            </div>
            <!-- 题型数量 -->
            <div class="form-item" style="margin-top: 50px;">
              <label class="form-label">题型数量</label>
              <div class="question-range">
                <input v-model="formData.choiceCount" placeholder="选择题数" type="number" min="0" max="99"
                  @input="validateInput('choiceCount')" class="custom-input" />
                <input v-model="formData.fillCount" placeholder="填空题数" type="number" min="0" max="99"
                  @input="validateInput('fillCount')" class="custom-input" />
                <input v-model="formData.judgeCount" placeholder="判断题数" type="number" min="0" max="99"
                  @input="validateInput('judgeCount')" class="custom-input" />
                <input v-model="formData.shortAnswerCount" placeholder="简答题数" type="number" min="0" max="99"
                  @input="validateInput('shortAnswerCount')" class="custom-input" />
              </div>
            </div>
            <!-- 按钮 -->
            <el-form-item>
              <el-button type="primary" @click="confirmComposition" class="button">确认组卷</el-button>
            </el-form-item>
          </template>
        </el-form>
      </div>

      <!-- 中间：题目列表 -->
      <div class="center-panel">
        <h2 class="table-title">题目列表</h2>
        <el-table :data="searchResults.list" class="custom-table" v-if="searchResults?.list.length"
          :cell-style="{ padding: '12px 0' }" row-key="exercisesId">
          <el-table-column prop="exercisesId" label="题号" width="100" align="center" header-align="center" />
          <el-table-column prop="title" label="题目" min-width="180" />
          <el-table-column prop="difficulty" label="难度" width="120" align="center" header-align="center">
            <template #default="{row}">
              <span>{{ getDifficultyText(row.difficulty) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center" header-align="center">
            <template #default="{ row }">
              <el-button type="primary" :icon="Pointer" v-if="!row.selected" @click="selectQuestion(row)">
                选择
              </el-button>
              <el-button plain disabled type="success" v-if="row.selected">
                已选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无数据" class="empty-tip" />
        <Pagination 
          ref="questionBanMosel" 
          class="center-panel-pagination" 
          :currentPage="currentPage"
          :pageSize="pageSize" 
          :total="total"
          @updateData="handlePageChange" />
      </div>

      <!-- 右边：选择的题目 -->
      <div class="right-panel">
        <SideNav ref="sideNav" :width="450" :left="false" :fold="fold" :menuList="menuList">
          <template #timu>
            <div v-if="formData.type === '手动组卷'" class="selected-questions">
              <h2 class="table-title-right">已选择题</h2>
              <template v-if="selectedQuestions.length > 0">
                <el-table :data="selectedQuestions" style="width: 100%">
                  <!-- 表格内容 -->
                  <el-table-column prop="exercisesId" label="题号" width="80" />
                  <el-table-column prop="title" label="题目" />
                  <el-table-column label="操作" width="80">
                    <template #default="{ row }">
                      <el-button type="danger" size="mini" @click="removeQuestion(row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="action-buttons">
                  <el-button type="primary" @click="saveQuestions">保存</el-button>
                  <el-button type="success" @click="handComposition">组卷</el-button>
                </div>
              </template>
              <el-empty v-else description="暂无数据" class="empty-tip" />
            </div>
          </template>
        </SideNav>
      </div>

    </div>
  </div>
</template>

<script lang="ts" name="QuestionBankExplanation">
import { computed, onMounted, ref } from 'vue';
import { ElMessage,ElTable, ElTableColumn, FormInstance, FormRules } from 'element-plus';
import SideNav, { SideNavMenu } from '@/components/SideNav.vue';
import { QuestionBankApi } from '@/api/QuestionBank/QuestionBank';
import {  Course, Exam, FormData, Knowledge, SearchData } from '@/types/QuestionBankType';
import { Loading, Pointer } from '@element-plus/icons-vue';
import Pagination, { PageResult } from '@/components/Pagination.vue';
import { usePaperStore } from '@/store/modules/questionBank/testpaperData'
import { useRouter } from 'vue-router'
</script>

<script setup lang="ts">

// 表单数据
const formData = ref<FormData>({
  title: '', // 题
  testTitle: '', // 测试标题
  type: '手动组卷', // 默认组卷类型
  difficulty: '简单', // 组卷难度
  selectedCourses: [], // 已选课程
  choiceCount: '', // 选择题数
  fillCount: '', // 填空题数
  judgeCount: '', // 判断题数
  shortAnswerCount: '', // 简答题数
  subType: '手动组卷', // 组卷的类型
  score: null,
  time: null,
  Subject: '',
  strategies: '',
});

//分页数据
const questionBanMosel = ref();
const currentPage = ref(1);
const pageSize = ref(12);
const total = ref(0);

// 右边菜单列表
const menuList = ref<SideNavMenu[]>([
  { iconName: 'icon-likesprogramliebiao', titleText: '已选', slotName: 'timu' }
]);

// 定义是否显示题目列表的变量
const isShowList = ref(false); // 默认值为 false
// 定义组卷效果
const TestPaper = ref(true);
// 展示试卷组件
const showExam = ref(false);
// 获取 SideNav 组件的引用
const sideNav = ref<InstanceType<typeof SideNav>>();
//  定义折叠状态 true 为折叠，false 为展开
const fold = ref(true);
// 路由
const router = useRouter()
// 组卷数据
const paperStore = usePaperStore()
// 课程列表
const courses = ref<Course[]>([]);
// 课程知识点
const knowledgePoints = ref<Knowledge[]>([]);
// 已选课程
const courseId = ref<number | null>(null);
// 已选知识点
const selectedKnowledgeId = ref<number | null>(null);
// 必填选项表单验证规则的引用
const formRef = ref<FormInstance>();


// 计算属性：过滤出当前课程的知识点
const filteredKnowledgePoints = computed(() => {
  return courseId.value
    ? knowledgePoints.value.filter(p => p.courseId === courseId.value)
    : [];

});
// 定义 handleTypeChange 方法
const handleTypeChange = (value: string) => {
  formData.value.type = value;
  if (value === '组卷') {
    // 手动组卷时重置 AI 组卷相关的字段
    formData.value.difficulty = '简单';
    formData.value.selectedCourses = [];
    formData.value.choiceCount = '';
    formData.value.fillCount = '';
    formData.value.judgeCount = '';
    formData.value.shortAnswerCount = '';
  } else {
    // AI 组卷时清空已选题目
    selectedQuestions.value = [];

  }
};

// 课程选择变化时加载对应知识点
const handleCourseChange = (newCourseId) => {
  courseId.value = newCourseId;
  searchParams.value.courseId = newCourseId;  // 手动同步
  selectedKnowledgeId.value = null;
};

// Ai组卷验证输入值的方法
const validateInput = (field: keyof FormData) => {
  const value = formData.value[field];
  const max = 99; // 最大允许值
  const min = 0;  // 最小允许值

};

// 手动组卷验证单个字段
const validateField = (prop: string) => {
  formRef.value?.validateField(prop);
};
//  必填选项验证表单规则
const rules = ref<FormRules<FormData>>({
  Subject:[
  { required: true, message: '请输入学科', trigger: 'blur' },
  { min: 2, max: 10, message: '标题长度需在2-10个字符之间', trigger: 'blur' }
  ],
  title: [
    { required: true, message: '请输入试卷标题', trigger: 'blur' },
    { min: 2, max: 50, message: '标题长度需在2-15个字符之间', trigger: 'blur' }
  ],
  score: [
    { required: true, message: '请输入试卷总分', trigger: 'blur' },
    { 
      type: 'number',
      message: '总分必须为数字',
      trigger: 'blur',
      transform: (value) => Number(value)
    },
    {
      validator: (_, value, callback) => {
        if (value === null || value <= 0) {
          callback(new Error('总分必须大于0'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  time: [
    { required: true, message: '请输入考试时长(单位/分钟)', trigger: 'blur' },
    { 
      type: 'number',
      message: '时长必须为数字',
      trigger: 'blur',
      transform: (value) => Number(value)
    },
    {
      validator: (_, value, callback) => {
        if (value === null || value <= 0) {
          callback(new Error('时长必须大于0'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  difficulty: [
    { required: true, trigger: 'blur' },
    {
      validator: (_, value, callback) => {
        if (formData.value.type === 'AI组卷' && !value) {
          callback(new Error('请选择组卷难度'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ],
  strategies: [
    { required: true, trigger: 'blur' },
    {
      validator: (_, value, callback) => {
        if (formData.value.type === 'AI组卷' && !value) {
          callback(new Error('请选择组卷策略'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ]
});

// 组卷策略
const strategies = ref(['均衡型', '知识点覆盖型', '难度侧重型']);

// 搜索参数
const searchParams = ref({
  title: '',          // 题目标题
  courseType: '',     // 课程类型
  knowledges: selectedKnowledgeId.value,     // 知识点
  questionType: '',   // 题目类型
  difficulty: null,     // 难度
  strategies: '',     // 策略
  courseId: courseId.value,
  pageNum: 0,
  pageSize: 0
});
// 定义存储搜索结果的
const searchResults = ref<PageResult<SearchData>>(null);
// 搜索题目
const searchQuestions = async (_courrentPage: number, _pageSize: number) => {
  console.log('Page changed:', _courrentPage, _pageSize);
  // 防重复调用
  // if (searchParams.value.pageNum === _courrentPage && searchParams.value.pageSize === _pageSize) {
  //   return;
  // }
  try {
    console.log('表单验证通过', formData.value);
    searchParams.value.pageNum = _courrentPage;
    searchParams.value.pageSize = _pageSize;
    if (formData.value.subType === '手动组卷') {
      console.log('课程id:', searchParams.value.courseId);
      console.log('搜索参数:', searchParams.value);
      searchResults.value = await  QuestionBankApi.searchQuestions(
        searchParams.value
      );

      console.log('完整响应:', searchResults.value);
      if (searchResults.value) {
        total.value  = searchResults.value.total;
        currentPage.value = searchResults.value.pageNum;
        pageSize.value = searchResults.value.pageSize;
      }
      // searchResults.value = Array.isArray(res.data) ? res.data : []; 
      
      isShowList.value = true;
      console.log('调用');
      ElMessage.success('搜索成功！');
    }else if (formData.value.subType === 'Ai组卷') {
      
    }
  } catch (error) {
    console.log('搜索参数:', searchParams.value);
    ElMessage.error('搜索失败');
    console.error('搜索错误:', error);
  }
};
//  分页
const handlePageChange = (_courrentPage, _pageSize) => {
  console.log('Page changed:', _courrentPage, _pageSize);
  // 调用搜索方法更新数据
  searchQuestions(_courrentPage, _pageSize);
};
// 根据难度值获取难度文本
const getDifficultyText = (value) => {
  switch(value) {
    case 1: return '简单'
    case 2: return '中等'
    case 3: return '困难'
    default: return value
  }
}

// 处理折叠按钮点击事件
const handleFold = () => {
  if(fold.value == true){
    // 打开
    sideNav.value?.foldAndExpand(false);
    fold.value = false
    console.log('打开')
  }else if(fold.value == false){
    // 关闭`
    sideNav.value?.foldAndExpand(true);
    fold.value = true
    console.log('关闭')
  }
};

// 已选题目
const selectedQuestions = ref<{ exercisesId: number; title: string; }[]>([]);

// 选择题目
const selectQuestion = async (row: any) => {
  // console.log('--- selectQuestion start ---');
  // console.log('Row:', row);
  // console.log('Current selectedQuestions:', selectedQuestions.value);

  const idExists = selectedQuestions.value.some(q => q.exercisesId === row.exercisesId);
  console.log('数据已存在:', idExists);
  if (!idExists) {
    

    // console.log('继续添加问题');

    const rowEl = document.querySelector(`[data-id="${row.exercisesId}"]`);
    if (rowEl) {
      // console.log('找到了Dom元素，正在添加问题');
      rowEl.classList.add('removing-row');
      await new Promise(resolve => setTimeout(resolve, 300));
    }

    // console.log('删除所选择的行');
    // searchResults.value.list = searchResults.value.list.filter(
    //   item => item.exercisesId !== row.exercisesId
    // );


    try {
      // console.log('Attempting to push to selectedQuestions');
      // 添加到已选列表
      selectedQuestions.value.push({ ...row });
      // console.log('After push:', selectedQuestions.value);
      row.selected = true; // 切换按钮状态

    } catch (e) {
      console.error('Push failed:', e);
    }

    if (fold.value == true) {
      // console.log('Handling fold');
      handleFold();
    }
  } else {
    console.log('Question already exists in selectedQuestions');
  }
  console.log('--- selectQuestion end ---');
};

// 计算已选择的知识点数量
const selectedCount = computed(() => formData.value.selectedCourses.length);

// 切换课程选中状态
const toggleCourse = (course: string) => {
  const index = formData.value.selectedCourses.indexOf(course);
  if (index === -1) {
    formData.value.selectedCourses.push(course);
  } else {
    formData.value.selectedCourses.splice(index, 1);
  }
};

// 删除题目
const removeQuestion = async (row: any) => {
  // 1. 从 selectedQuestions 中安全移除
  const index = selectedQuestions.value.findIndex(q => q.exercisesId === row.exercisesId);
  if (index === -1) return;

  // 保存被移除的题目（使用解构保留所有已有字段）
  const [removedQuestion] = selectedQuestions.value.splice(index, 1);

  // 2. 处理 searchResults
  const searchResultItem = searchResults.value.list.find(
    item => item.exercisesId === row.exercisesId
  );

  if (searchResultItem) {
    // 2.1 如果存在于 searchResults，更新按钮状态
    searchResultItem.selected = false; // ✅ 关键修改：直接操作 searchResults 中的对象

    // 动画效果（可选）
    const rowEl = document.querySelector(`[data-id="${row.exercisesId}"]`);
    if (rowEl) {
      rowEl.classList.add('adding-row');
      await new Promise(resolve => setTimeout(resolve, 300));
      rowEl.classList.remove('adding-row');
    }
  } else {
    // 2.2 如果不存在，重新构建完整数据对象
    const fullQuestion = {
      ...removedQuestion,       // 来自 selectedQuestions 的基础字段
      ...row,                  // 来自传入 row 的扩展字段
      selected: false          // ✅ 强制设置选择状态
    };

    // 添加并排序
    searchResults.value.list = [
      ...searchResults.value.list,
      fullQuestion
    ].sort((a, b) => Number(a.exercisesId) - Number(b.exercisesId));
  }
};

// 保存题目
const saveQuestions = () => {
  console.log('保存题目:', selectedQuestions.value);
  ElMessage.success('保存成功！');
};
// 手动组卷
const handComposition = async () => {
  console.log('手动组卷')
  try {
    await formRef.value?.validate();
    console.log('✅ 校验确认通过'); // 确保执行到这里
    if (formData.value.subType === '手动组卷') {
      const allExerciseIds = selectedQuestions.value
        .map(q => q.exercisesId)
        .filter((exercisesId): exercisesId is number => exercisesId !== undefined && exercisesId !== null);
      
      if (allExerciseIds.length === 0) {
        ElMessage.warning('请至少选择一道题目');
        return;
      }

      const result = await QuestionBankApi.findQuestionsByExercisesId(allExerciseIds);

      // 安全解析JSON的辅助函数（泛型支持）
      const parseAnswerString = (jsonString) => {
        try {
          return jsonString ? JSON.parse(jsonString) : []
        } catch (error) {
          console.error('解析失败:', error, '原始数据:', jsonString)
          return [] // 始终返回数组（根据需求可改为返回空字符串）
        }
      }
      console.log('手动组卷返回结果:', result);
      if (result.code === 200) {
        const data: Exam = {
          Subject: formData.value.Subject,
          testTitle: formData.value.title,
          examTime: formData.value.time,
          examScore: formData.value.score,
          exercises: result.data.map(item => ({
            exercisesId: item.exercisesId,
            title: item.title,
            questionStem: item.questionStem || '', 
            questions: item.questions?.map(question => ({
              recId: question.recId, // 确保有唯一ID
              exercisesId: item.exercisesId, // 添加 exercisesId
              displayOrder: question.displayOrder || 0, // 添加 displayOrder
              userAnswerHtml: question.userAnswerHtml || '', // 添加 userAnswerHtml
              userAnswerText: question.userAnswerText || '', // 添加 userAnswerText
              questionTitle: question.questionTitle,
              questionType: question.questionType as '选择题' | '填空题' | '判断题' | '简答题',
              score: question.score || 0, // 默认分值
              answerOptions: Array.isArray(question.answerOptions) ? question.answerOptions.join(',') : question.answerOptions || '', // 将数组转换为字符串
              answer: parseAnswerString(question.answer).answer, // 正确答案
              analysis: question.analysis || '', // 解析
            })) || [] // 处理questions为空的情况
          }))
        };
        
        paperStore.setPaperData(data);
        // paperStore.restoreData();
        console.log('组卷数据:', data);
        router.push({ name: 'groupVolumeIndex' });
        ElMessage.success('组卷成功');
      } else {
        ElMessage.error(result.message || '组卷失败');
        console.error('组卷失败:', result.message);
      }
    }else if (formData.value.subType === 'Ai组卷') {

    }
  } catch (error: unknown) {
    console.log('❌ 校验失败:', error);
    console.error('组卷失败:', error);
    ElMessage.error('组卷失败，请稍后重试');
  }
};

// Ai组卷
const confirmComposition = () => {
  console.log('组卷信息:', formData.value);
  // isShowList.value = false;
  showExam.value = true;
  ElMessage.success('组卷成功！');
};

// 加载所有课程和知识点
onMounted(async () => {
  try {
    courses.value = await QuestionBankApi.getCourses();
    // console.log('课程列表:', courses.value);
    knowledgePoints.value = await QuestionBankApi.getKnowledgePoints();
  } catch (error) {
    console.error('初始化数据加载失败:', error);
  }
});

</script>

<style scoped>
.questionBankExplanation {
  width: var(--width);
  height: 100%;
  padding: 20px 0px;
}
/* 添加过渡效果 */
:deep(.el-table__body tr) {
  transition: all 0.3s ease;
}

.removing-row {
  transform: translateX(100%);
  opacity: 0;
}

.empty-tip{
  margin-top: 240px;
}

/* 主页面 */
.layout {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

/* 左边面板布局 */
.left-panel {
  padding: 20px;
  height: 100%;
  flex-shrink: 0;
  /* 宽度为固定值时，设置固定宽度 */
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 1);
  overflow: auto;
}

.button {
  margin-top: 20px;
  margin-left: 40px
}

.table-container {
  width: 100%;
  overflow-x: auto;
  /* 允许水平滚动 */
  overflow: auto;
  /* 允许水平和垂直滚动 */
  max-height: 400px;
  /* 设置最大高度，超出时显示垂直滚动条 */
}

.scrollable-table {
  width: 100%;
}

/* 优化表格样式 */
.el-table {
  font-size: 14px;
}

.el-table th,
.el-table td {
  padding: 12px 0;
}


.el-button {
  font-size: 12px;

}

/* 按钮悬停效果 */
button:hover {
  opacity: 0.8;
}

.course-image.selected {
  border-color: #409EFF;
}

/* 中间面板布局 */
.center-panel {
  flex: 1;
  width: 600px;
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, .5);
  overflow: auto;
}
/* 中间标题样式 */
.table-title{
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

/* 中间标题样式 */
.table-title-right{
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  color: #333;
  text-align: left;
  
}
/* 表头样式 */
:deep(.el-table__header th) {
  background-color: #f5f7fa !important;
  font-weight: 600;
  color: #333;
}
/**  自定义表格样式 */
.custom-table{
  border-radius: 1em;
}

/* 按钮样式 */
.action-btn {
  /* width: auto; */
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}
/* 已选择知识点样式 */
.Ai-handlecourse{
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #606266;
}
/* 课程选择框样式 */
.Ai-course{
  width: 300px;
  height: 180px;
  border-radius: 20px;
  background-color: #f5f7fa;
  padding: 16px;
  overflow-y: auto;
}
/* 课程按钮盒子 */
.Ai-course-button{
  display: flex;
  gap: 8px; 
  flex-wrap: wrap;
}
.course-button{
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;
  color: #606266;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  font-size: 12px;
  margin: 4px; /* 添加间距 */
}
/* 选中状态 */
.course-button--selected {
  background-color: #409EFF;
  color: #ffffff;
}

.center-panel-pagination{
  margin-top: 20px;
}

/* 右边面板布局 */
.right-panel {
  /* flex: 1;   */
  height: 100%;
  overflow: auto;
  flex-shrink: 0;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1);
}

.selected-questions{
  height: 100%;
  overflow: auto;
  
}

.course-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.question-range {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  gap: 10px;
  /* 按钮间距 */
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

/* 强化h4标签 */
.form-label-h4 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.form-divider{
  margin-bottom: 30px;
  margin-top: 40px;
}

.question-range {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-input {
  width: 100%;
  max-width: 300px;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  transition: border-color 0.3s;
}

.custom-input:focus {
  border-color: #409eff;
  outline: none;
}

.custom-input::placeholder {
  color: #c0c4cc;
}

.exam-paper {
  flex: 1;
  margin-left: 20px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100%;
  overflow-y: auto;

}

.exam-paper-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
  /* 或根据需求调整高度 */
}
</style>